﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    <meta name="msapplication-tap-highlight" content="no" />
    <title id='Description'>JavaScript ResponsivePanel - Mobile Example</title>
    <link rel="stylesheet" href="../styles/demo.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.windowsphone.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.blackberry.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.android.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.mobile.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../simulator.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtextarea.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxresponsivepanel.js"></script>
    <style type="text/css">
        #jqxResponsivePanel, #content {
            float: left;
        }

        #jqxMenu {
            border: none;
        }

        #content {
            border: 1px solid #AAAAAA;
            width: 200px;
            height: 230px;
            overflow: auto;
            font-family: Verdana;
            font-size: small;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = prepareSimulator("responsivepanel");
            $('#jqxMenu').jqxTree({ theme: theme, height: 230, width: '100%' });
            $('#jqxMenu').css('visibility', 'visible');

            $('#jqxResponsivePanel').jqxResponsivePanel({
                width: '29%',
                height: 'auto',
                theme: theme,
                collapseWidth: '100%',
                collapseBreakpoint: 800,
                toggleButton: $('#toggleResponsivePanel'),
                animationType: 'none',
                autoClose: false
            });

            $('#jqxResponsivePanel').on('collapse', function (event) {
                if (event.args.element)
                    return;

                $('#content').css('width', '100%');
            });
            $('#jqxResponsivePanel').on('expand', function (event) {
                if (event.args.element)
                    return;

                $('#content').css('width', '70%');
            });

            if ($('#jqxResponsivePanel').parent().width() < 800) {
                $('#content').css('width', '100%');
            }
            else {
                $('#content').css('width', '70%');
            }
            $('#content').jqxPanel({ theme: theme });
            initSimulator("responsivePanel");
        });
    </script>
</head>
<body class='default'>
    <div id="demoContainer" class="device-mobile">
        <div id="container" class="device-mobile-container">
            <div style="box-sizing: border-box; margin-bottom: 2px; width: 100%; height: 50px;
        padding: 10px 0 0 10px;">
                <div id="toggleResponsivePanel">
                </div>
            </div>
            <div id="jqxResponsivePanel">
                <div id="jqxMenu" style="border: none; visibility: hidden;">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li item-selected="true">
                            About Us
                            <ul>
                                <li><a href="#">History</a></li>
                                <li><a href="#">Our Vision</a></li>
                                <li>
                                    <a href="#">The Team</a>
                                    <ul>
                                        <li><a href="#">Brigita</a></li>
                                        <li><a href="#">John</a></li>
                                        <li><a href="#">Michael</a></li>
                                        <li><a href="#">Peter</a></li>
                                        <li><a href="#">Sarah</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Clients</a></li>
                                <li><a href="#">Testimonials</a></li>
                                <li><a href="#">Press</a></li>
                                <li><a href="#">FAQs</a></li>
                            </ul>
                        </li>
                        <li>
                            Services
                            <ul>
                                <li><a href="#">Product Development</a></li>
                                <li><a href="#">Delivery</a></li>
                                <li><a href="#">Shop Online</a></li>
                                <li><a href="#">Support</a></li>
                                <li><a href="#">Training &amp; Consulting</a></li>
                            </ul>
                        </li>
                        <li>
                            Products
                            <ul>
                                <li>
                                    <a href="#">New</a>
                                    <ul>
                                        <li><a href="#">Corporate Use</a></li>
                                        <li><a href="#">Private Use</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="#">Used</a>
                                    <ul>
                                        <li><a href="#">Corporate Use</a></li>
                                        <li><a href="#">Private Use</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Featured</a></li>
                                <li><a href="#">Top Rated</a></li>
                                <li><a href="#">Prices</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Gallery</a></li>
                        <li><a href="#">Events</a></li>
                        <li><a href="#">Careers</a></li>
                        <li>
                            <a href="#">Contact Us</a>
                            <ul>
                                <li><a href="#">Enquiry Form</a></li>
                                <li><a href="#">Map &amp; Driving Directions</a></li>
                                <li><a href="#">Your Feedback</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <div style="border:none;" id="content">
                <h4 style="text-align: center;">
                    About Us
                </h4>
                <p style="line-height: 1.5;">
                    <span style="float: left; font-size: 3.26em; line-height: 0.5; margin-top: 0.2em;">S</span><strong>
                        tark
                        Industries
                    </strong> is a multinational conglomerate with facilities in over
                    thirty different countries on all seven continents. The President and CEO of Stark
                    Industries is billionaire industrialist Anthony "Tony" Stark.
                </p>
                <p>
                    The company's origins date back to the mid-19th century when Isaac Stark, Sr. began
                    developing new electrical and engineering technology that helped to redefine innovative
                    security measures for the industrial age.
                </p>
                <p>
                    With growing prosperity, Stark Industries (then known as Stark Enterprises) was
                    quickly propelled into the modern era as a major global industrial superpower, due
                    in no small measure to Isaac Stark, Sr.'s direct descendant Howard Stark. Under
                    Howard Stark's leadership, Stark Industries became the world leader in the development
                    of munitions with its corporate office located on Long Island, New York. Stark Industries
                    quickly branched out into other scientific fields including aeronautics, robotics,
                    micro-technology and fringe science. With increasing expansion, the company soon
                    became known as Stark Industries. When Howard Stark passed away, his sole heir Tony
                    Stark inherited all of his father's business assets and took full control of Stark
                    Industries.
                </p>
            </div>
        </div>
    </div>
</body>
</html>
